<template>
	<view class="c-wrap my" v-if="userInfo">
		<ice-header :account="userInfo.nickname"></ice-header>
		<view style="margin: 25rpx;">
			<view class="user-box">
				<view class="u-flex-row u-flex-y-center" style="padding: 0 30rpx;">
					<u-upload @afterRead="afterRead" name="6" :maxCount="1" width="110rpx" height="110rpx"
						style="flex: unset;">
						<image :src="userInfo.avatar" mode="aspectFill"
							style="width: 110rpx;height: 110rpx;border-radius:110rpx"></image>
					</u-upload>

					<view class=" ice-ml-30">
						<view @click="showNickName=true" class="id font-34 u-flex-row" style="align-items: end;">
						<span style="margin-right: 5rpx;">{{userInfo.nickname}}</span>
						<u-icon name="edit-pen" size="20" color="#ffffff"></u-icon>
						</view>
						<view class="address font-26" style="margin-top: 10rpx;">ID: {{userInfo.username}}</view>
					</view>
				</view>
				<view class="u-flex-row u-flex-between u-flex-y-center"
					style="text-align: center;margin-top: 50rpx;padding: 0 30rpx;">
					<view>
						<view class="font-26" style="color: rgba(255, 255, 255, 0.7);">{{$t('账户余额')}}</view>
						<view class="font-38" style="margin-top: 20rpx;">{{userInfo.money}}</view>
					</view>
					<view>
						<view class="font-26" style="color: rgba(255, 255, 255, 0.7);">{{$t('团队收益')}}</view>
						<view class="font-38" style="margin-top: 20rpx;">{{userInfo.total_earn}}</view>
					</view>
					<view>
						<view class="font-26" style="color: rgba(255, 255, 255, 0.7);">{{$t('团队人数')}}</view>
						<view class="font-38" style="margin-top: 20rpx;">{{userInfo.team_count}}</view>
					</view>
				</view>
				<view class="u-flex-row u-flex-y-center u-flex-around font-34"
					style="height: 86rpx;background-color: rgba(39,39,39,0.15);margin-top: 40rpx;">
					<text @click="goPage('recharge')">{{$t('充值')}}</text>
					<text @click="goPage('withdrawal')">{{$t('提现')}}</text>
					<text @click="goPage('transform')">{{$t('转账')}}</text>
				</view>
			</view>
			<view style="margin-top: 25rpx;background-color: #0D0D0D;border-radius: 12rpx;padding: 0 20rpx;">
				<u-cell @click="goPage('wallet')" size="large" :title="$t('我的钱包')" isLink>
					<image src="../../static/user/1.png" mode="widthFix" slot="icon"
						style="width: 30rpx;margin-left: 18rpx;"></image>
				</u-cell>
				<u-cell @click="goPage('team')" size="large" :title="$t('我的团队')" isLink>
					<image src="../../static/user/2.png" mode="widthFix" slot="icon"
						style="width: 30rpx;margin-left: 18rpx;"></image>
				</u-cell>
				<u-cell size="large" @click="copy(config?config.dian_bao:'')" :title="$t('电报链接')" isLink
					:value="config&&config.dian_bao">
					<image src="../../static/user/3.png" mode="widthFix" slot="icon"
						style="width: 30rpx;margin-left: 18rpx;"></image>
				</u-cell>
				<u-cell@click="goPage('share')" size="large" :title="$t('推广链接')" isLink>
					<image src="../../static/user/4.png" mode="widthFix" slot="icon"
						style="width: 30rpx;margin-left: 18rpx;"></image>
					</u-cell>
			</view>
		</view>
		<u-modal :show="showNickName" @confirm="saveNickName" title="修改昵称" :closeOnClickOverlay="true"
			@close="showNickName = false">
			<u--input placeholder="请输入昵称" border="bottom" v-model="userInfo.nickname"></u--input>
		</u-modal>
		<ice-tabbar :index="3"></ice-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				config: null,
				showLink: false,
				showNickName: false,
			}
		},
		computed: {
			lang() {
				return {
					"钱包地址": this.$t("钱包地址"),
					"邀请好友": this.$t("邀请好友"),
					"邀请好友即可获得更多收益": this.$t("邀请好友即可获得更多收益"),
					"服务与工具": this.$t("服务与工具"),
					"资产": this.$t("资产"),
					"新闻中心": this.$t("新闻中心"),
					"订单中心": this.$t("订单中心"),
					"充值记录": this.$t("充值记录"),
					"提现记录": this.$t("提现记录"),
				}
			},
		},
		async onLoad(e) {
			await uni.$ice.checkLogin()
			this.getUserInfo()
			this.getConfig()
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
			copy(str) {
				uni.setClipboardData({
					data: str,
					success: () => {
						uni.showToast({
							title: this.$t('复制成功'),
							icon: 'success'
						})
					}
				});
			},
			getConfig() {
				uni.$ice.post('index/config', {}, false).then(res => {
					this.config = res.data
				}).catch(err => {

				})
			},
			saveNickName() {
				uni.$ice.post('user/saveNickname', {
					nickname: this.userInfo.nickname
				}, true).then(res => {
					this.getUserInfo()
					uni.showToast({
						title: this.$t(res.msg),
						icon: 'none'
					})
					this.showNickName = false;
				}).catch(err => {

				})
			},
			getUserInfo() {
				let tmp = uni.getStorageSync('userInfo')
				if (tmp) {
					this.userInfo = JSON.parse(tmp)
				}
				uni.$ice.post('user/index', {}, false).then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					this.userInfo = res.data
					if (this.userInfo.username != uni.$ice.walletAddress) {
						uni.removeStorageSync("token")
						location.reload();
					}
					uni.stopPullDownRefresh()

				}).catch(err => {

				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event.file)
				let token = uni.getStorageSync("token")
				uni.$u.http.upload('/user/uploadAvatar', {
				    filePath: event.file.url, // 要上传文件资源的路径。
				    name: 'avatar',
					params: {},
					header: {TOKEN:token}, 
				    formData: {}, // HTTP 请求中其他额外的 form data
				    // 返回当前请求的task, options。请勿在此处修改options。非必填
				    getTask: (task, options) => {
				    },
				}).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						uni.removeStorageSync("userInfo")
						this.getUserInfo()
					}
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					// 返回的res.data 已经进行JSON.parse
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: transparent;
	}

	.user-box {
		background: linear-gradient(119deg, #258CE9, #DA2B45);
		padding-top: 30rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.my .title {
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 40rpx
	}

	.my .title .left {
		display: flex;
		flex-wrap: nowrap
	}



	.my .title .left .id {
		color: #fff
	}

	.my .address {
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.my .title .right {
		padding-top: 16rpx
	}

	.my .list {

		box-sizing: border-box;
		height: 190rpx;
		background: #000031;
		border: 1px solid #9125ff;
		border-radius: 64rpx;
		margin: 0 auto;
		padding: 42rpx 80rpx 32rpx 80rpx;
		display: flex;
		justify-content: space-between;
		color: #8f25ff;
		text-align: center;
		margin-bottom: 19px
	}

	.my .invite {

		box-sizing: border-box;
		background: #000031;
		border: 1px solid #9125ff;
		border-radius: 32rpx;
		margin-top: 40rpx;
		display: flex;
		padding-left: 72rpx;
		padding-right: 62rpx;
		justify-content: space-between;
		margin-bottom: 34rpx;
		align-items: end;
	}

	.my .invite .text {
		padding-top: 64rpx
	}

	.my .invite .text .up {
		padding-bottom: 18rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff
	}

	.my .invite .text .down {
		padding-bottom: 46rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #a5a5a5
	}

	.my .invite .img {
		padding-top: 28rpx;
		width: 182rpx;
	}

	.my .setting {

		box-sizing: border-box;
		background: #080647;
		border: 1px solid #9125ff;
		border-radius: 32rpx;
		margin: 0 auto;
		padding: 44rpx 30rpx 30rpx 40rpx
	}

	.my .setting .setting-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: 400;
		padding-bottom: 32rpx
	}

	.my .setting .setting-list {
		display: flex;
		justify-content: space-between;

		margin-bottom: 60rpx
	}

	.my .setting .setting-list .left {
		display: flex;
		flex-wrap: nowrap;
		color: #fff;
		flex: 1;
		font-size: 28rpx
	}

	.my .setting .img {
		margin-right: 20rpx;
		width: 40rpx;
	}

	/* .my .setting .setting-list .left img {
		margin-right: 20rpx
	} */

	.my .setting .setting-list .right {
		color: #fff
	}
</style>